<template>
  <el-dialog
    :title="employeesFrom.id?'编辑员工':'新增员工'"
    :visible="isShowDialog"
    @close="closeFn"
  >
    <el-form
      ref="employeeFrom"
      :model="employeesFrom"
      :rules="rules"
      label-width="100px"
      align="left"
    >
      <el-form-item
        prop="username"
        label="姓名："
      >
        <el-input
          v-model="employeesFrom.username"
          placeholder="1 - 30 个字符"
        />
      </el-form-item>
      <el-form-item
        prop="mobile"
        label="手机："
      >
        <el-input
          v-model="employeesFrom.mobile"
          placeholder="请输入手机号"
        />
      </el-form-item>
      <el-form-item
        prop="timeOfEntry"
        label="入职时间："
      >
        <el-date-picker
          v-model="employeesFrom.timeOfEntry"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item
        prop="formOfEmployment"
        label="聘用形式："
      >
        <el-select
          v-model="employeesFrom.formOfEmployment"
          placeholder="请选择"
          @blur="formOfEmploymentBlurFn"
        >
          <el-option
            v-for="item in employee.hireType"
            :key="item.id"
            :value="item.id"
            :label="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        prop="workNumber"
        label="工号："
      >
        <el-input
          v-model="employeesFrom.workNumber"
          placeholder="1 - 20 个字符"
        />
      </el-form-item>
      <el-form-item
        prop="departmentName"
        label="部门："
      >
        <el-input
          v-model="employeesFrom.departmentName"
          @focus="isShowTree=true"
        />
        <el-tree
          v-if="isShowTree"
          :data="departmentList"
          default-expand-all
          :props="{ label: 'name'}"
          @node-click="handleNodeClick"
        />
      </el-form-item>
      <el-form-item
        prop="correctionTime"
        label="转正时间："
      >
        <el-date-picker
          v-model="employeesFrom.correctionTime"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item>
        <div class="btn">
          <el-button @click="closeFn">取消</el-button>
          <el-button
            type="primary"
            @click="onSumbitFn"
          >确定</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {
  getEmployeeDetailById,
  addEmployee,
  eidtEmployee
} from '@/api/employees'
import { getDepartmentList } from '@/api/company'
import employee from '@/assets/constant/employees'
import { listToTreeData } from '@/utils/index'
export default {
  data() {
    return {
      isShowDialog: false,
      employeesFrom: {
        username: '', // 姓名
        mobile: '', // 手机号
        workNumber: '', //  工号
        formOfEmployment: '', //  聘用形式
        departmentName: '', //   部门
        timeOfEntry: '', //   入职时间
        correctionTime: '' //    转正时间
      },
      employee,
      isShowTree: false,
      departmentList: [],
      rules: {
        username: [
          { required: true, message: '员工名称不能为空', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '员工手机号不能为空', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '输入的手机号码不符合规则',
            trigger: 'blur'
          }
        ],
        workNumber: [
          { required: true, message: '员工工号不能为空', trigger: 'blur' }
        ],
        formOfEmployment: [
          { required: true, message: '聘用形式不能为空', trigger: 'blur' }
        ],
        departmentName: [
          { required: true, message: '部门不能为空', trigger: 'change' }
        ],
        timeOfEntry: [
          { required: true, message: '入职时间不能为空', trigger: 'blur' }
        ],
        correctionTime: [
          { required: true, message: '转正时间不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    const { depts } = await getDepartmentList()
    this.departmentList = listToTreeData(depts, '')
  },
  methods: {
    handleNodeClick(nodeData) {
      this.employeesFrom.departmentName = nodeData.name
      this.isShowTree = false
    },
    // 添加员工事件
    async onSumbitFn() {
      await this.$refs.employeeFrom.validate()
      if (this.employeesFrom.id) {
        await eidtEmployee(this.employeesFrom)
      } else {
        await addEmployee(this.employeesFrom)
      }
      this.$parent.getEmployeeList()
      this.$message.success('操作成功')
      this.isShowDialog = false
    },
    // 关闭弹窗事件
    closeFn() {
      // 关闭弹窗
      this.isShowDialog = false
      //   清空数据
      setTimeout(() => {
        this.employeesFrom = {
          username: '', // 姓名
          mobile: '', // 手机号
          workNumber: '', //  工号
          formOfEmployment: '', //  聘用形式
          departmentName: '', //   部门
          timeOfEntry: '', //   入职时间
          correctionTime: '' //    转正时间
        }
        // 将输入框的数据清空
        this.$refs.employeeFrom.resetFields()
      }, 100)
    },
    // 选择框失焦验证
    formOfEmploymentBlurFn() {
      setTimeout(() => {
        this.$refs.employeeFrom.validateField('formOfEmployment')
      }, 100)
    },
    // 发送请求获取数据
    async getEmployeeDetail(id) {
      this.employeesFrom = await getEmployeeDetailById(id)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  .el-dialog__header {
    background-color: rgb(102, 177, 255);
    span,
    .el-dialog__close {
      color: #fff;
      font-size: 20px;
      font-weight: 500;
    }
  }
  .el-form {
    .el-form-item__label {
      text-align: left;
    }
    .btn {
      float: right;
      margin-right: 150px;
    }
  }
}
.el-tree {
  position: absolute;
  width: 100%;
  z-index: 1;
  height: 150px;
  overflow: auto;
}
</style>
